import React, { useState, FC } from 'react';
import type { MenuProps } from 'antd';
import DiscoverNavBarData from '@/assets/data/discover-menus.json';
import { Tabs, Menu } from 'antd';
import type { TabsProps } from 'antd';
import Recommend from '../c-views/Recommend';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
const onChange = (key: string) => {
    console.log(key);
};


const navbars: TabsProps['items'] = DiscoverNavBarData.map((item, index) => ({
    key: item.link,
    label: item.title,
}))

const NavTabs: FC = () => {
    const [current, setCurrent] = useState('/discover/recommend');
    const navigate = useNavigate()

    const onClick: MenuProps['onClick'] = (e) => {
        console.log('click ', e);
        setCurrent(e.key);
        navigate(e.key)
    };
    return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={navbars} />;
};

export default NavTabs;




